<template>
  <div class="home_game_cube">
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="threeGameKinds">
      <nut-tab-pane :title="unserialize(item.name, false)" :pane-key="item.id" v-for="item in threeGameKinds" :key="item.id">
        <GameList 
          :games="cubeGames" 
          :type="listType"
          :gameWidth="82"
          :gameHeight="108"
        />
      </nut-tab-pane>
    </nut-tabs>
    <div class="load_more_btn" @click="loadMoreGames">{{ t('home_page_more_game') }}</div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref, reactive, watch, defineProps, onBeforeMount } from 'vue';
import { i18n } from '@/languages';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { NetPacket } from '@/netBase/NetPacket';
import H5Websocket from "@/net/Net1";
import { NetMsgType } from '@/netBase/NetMsgType';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { useI18n } from 'vue-i18n';
import GameList from "./gameList.vue";

import { useRouter } from "vue-router";
const router = useRouter();
import { Page } from '@/store/page';

import { unserialize } from '@/utils/useStoreMethods';

const { lang, homeGameData, cubeGames  } = storeToRefs(Page(pinia));

const { t } = useI18n();

// const gameStore = useGameStore();

const props: any = defineProps({
  tabInfo: {
    type: Object,
    default: () => ({}), // 设置默认值
  },
});

const state = reactive({
  // 游戏平台id  -1为查看全部的游戏
  agentId: -1,

  // 自定义标签 0为全部 1为热门 -2为收藏，-3为最近
  lableId: 1,

  // //也表示场馆id -1 为所有场馆
  cubekKindId: props.tabInfo.id,

  // 当前点击的游戏
  currentGame: null as any,

})

const params: any = reactive({ // 参数
  pageSize: 12,
  page: 1,
})

const result: any = reactive({ // 结果
  total_page: 0,
  // 游戏集合
  list: []
})

let gameName = ref('')
let threeGameKinds = ref<any[]>([])

const getHomeData = () => {
  const data = homeGameData.value.find((e: any) => (e.id == Number(props.tabInfo.id)))
  gameName.value = unserialize(data.name, false)
  if ([3, 4].includes(data.id)) {
    props.tabInfo.type = 2
    threeGameKinds.value = data.three_platform
    return
  }
  let a: any = {
    id: -1,
    name: { 'zh-CN': '热门', 'vi-VN': 'gần đây', 'en-US': 'Recent', },
    picture_pc: "game_icons/icon_pg.png"
  }
  threeGameKinds.value = [a, ...data.three_platform]
}

const tabChange = (item: any) => {
  if (item.paneKey != -1) {
    state.lableId = 0
  } else {
    state.lableId = 1
  }
  state.agentId = item.paneKey
  
  nextTick(() => {
    resetData()
    queryCubeData()
  })
}


const listType = ref(1);

const resetData = () => {
  params.page = 1
  result.cubeState = []
}

// 返回游戏列表数据
const handleGames = async (res: any) => {
  await Page(pinia).updateCubeGames(res.info);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_games_in_platform, null);
}


const queryCubeData = () => { // 查询
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_get_games_in_platform, handleGames);
  const query = NetPacket.req_get_games_in_platform()
  query.agentId = Number(state.agentId)
  query.kindId = state.cubekKindId
  query.lableId = state.lableId
  query.page = params.page
  query.pageSize = params.pageSize
  H5Websocket.sendMessageHandler(query);
}

watch(
  () => props.tabInfo.id,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {  // 防止首次触发时重复调用
      state.cubekKindId = newVal;
      state.agentId = -1;  // 重置 agentId
      resetData();
      queryCubeData();  // 初次加载时请求数据
    }
  },
  { immediate: true }  // 立即触发一次
);

watch(
  () => state.agentId,
  (newId) => {
    if (newId !== -1) {
      resetData();  // 重置数据
    }
  },
  { immediate: true }  // 立即触发一次
);

// 加载更多游戏
const loadMoreGames = () => {
  if (props.tabInfo.id !== 0) {
    router.push({
      path: '/gameDetail',
      query: { venue_id: props.tabInfo.id }
    })
  } else {
    alert('敬请期待')
    return
  }
}

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
  nextTick(() => {
    getHomeData();
    state.agentId = -1;  // 初始值为 -1
    queryCubeData()
  });
})

</script>

<style lang="scss" scoped >
.home_game_cube {

  :deep(.nut-tabs) {
    width: 347px;
    margin:  0 auto;
    

    .nut-tabs__titles {
      border-radius: 8px;
      background: #131232 !important;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      height: 36px;
      padding: 0;
      margin-bottom: 8px;
    }
  }

  .load_more_btn {
    display: flex;
    width: 347px;
    height: 44px;
    margin: 8px auto 0;
    padding: 15px 0px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #282747;
    box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
  }
}
</style>